<template>
	<el-dialog title="用户角色维护" :visible.sync="dialogVisible" @close="handleClose"
		:close-on-click-modal="false" >
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>用户角色维护</span>
		</div>

		<!-- <div class="smp-search" v-if="dialogVisible"> -->
			<el-table ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%;"
			@selection-change="handleSelectionChange">
				
				<el-table-column type="selection" v-model="multipleSelection">
				</el-table-column>
				
				<el-table-column label="角色ID" prop="id" align="center">
				</el-table-column>
				
				<el-table-column label="角色名称" prop="roleName" align="center">
				</el-table-column>
			</el-table>
		<!-- </div> -->
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
	import {getRoles,getRoleByUserName} from '@/api/role.js';
	import {maintenanceInfo} from '@/api/userRole.js';

	export default {


		data() {
			return {
				
				userName:'',
				
				dialogVisible: false,
				
				tableData:[],
				multipleSelection:[],
				list:[],
				query:{
						listRole:[],
						userName:''
				}
				

			};
		},


		methods: {
			
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			
			init(){
				getRoles().then(response => {
					this.tableData = response.data.extend;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				getRoleByUserName({"userName":this.userName}).then(response => {
					this.list = response.data.extend;
					
					if(this.list){
						this.list.forEach(el =>{	
							for(let i = 0;i <　this.tableData.length; i++){
								if(el.id == this.tableData[i].id){
									this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
								}
							}
						})
					}
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			 onSubmit() {
				this.updateInfo();
			},

			updateInfo(){
				this.query.listRole = this.multipleSelection;
				this.query.userName = this.userName;
				maintenanceInfo(this.query).then(response => {
					this.$message({
						duration:5000,
						type: 'success',
						message: '用户角色信息维护成功！'
					});
					this.closeDialog();
				}).catch(error => {
					this.$message({
						duration:5000,						type: 'error',
						message: '用户角色信息维护失败！'
					});
					this.closeDialog();
				});
			},
			

			showDialog(row) {
				this.userName = row.userName;
				this.init();
				this.dialogVisible = true;

			},

			closeDialog() {
				this.$refs.multipleTable.clearSelection();
				this.dialogVisible = false;
			},

			handleClose() {
				this.$refs.multipleTable.clearSelection();
				this.dialogVisible = false;
			}


		},

	}
</script>

<style>
</style>
